<template>
<div>
<nav-header></nav-header>
<nav-bread><span> Goods</span></nav-bread>
<div class="accessory-result-page accessory-page">
  <div class="container">
    <div class="filter-nav">
      <span class="sortby">Sort by:</span>
      <a href="javascript:;" class="default cur">Default</a>
      <a href="javascript:;" class="price" @click="sortGoods">Price <svg class="icon icon-arrow-short"><use xlink:href="#icon-arrow-short"></use></svg></a>
      <a href="javascript:void(0)" class="filterby stopPop" @click="showFilterPop">Filter by</a>
    </div>
    <div class="accessory-result">
      <!-- filter -->
      <div class="filter stopPop" id="filter" v-bind:class="{'filterby-show':filterBy}">
        <dl class="filter-price">
          <dt>Price:</dt>
          <dd><a href="javascript:void(0)" v-bind:class="{'cur':priceChecked =='all'}" @click="priceChecked='all'">All</a></dd>
          <dd v-for="(price,index) in priceFilter" >
            <a href="javascript:void(0)" @click="setPriceFilter(index)" v-bind:class="{'cur':priceChecked==index}">{{price.startPrice}} - {{price.endPrice}}</a>
          </dd>
        </dl>
    </div>

      <!-- search result accessories list -->
    <div class="accessory-list-wrap">
        <div class="accessory-list col-4">
          <ul>
            <li v-for="(item,index) in goodsList">
              <div class="pic">
                <a href="#"><img v-lazy="'static/'+item.productImage" alt=""></a>
              </div>   
              <div class="main">
                <div class="name">{{item.productName}}</div>
                <div class="price">{{item.salePrice}}</div>
                <div class="btn-area">
                  <a href="javascript:;" class="btn btn--m" @click="addCart(item.productId)">加入购物车</a>
                </div>
              </div>
            </li>
          </ul>
        </div>
              <div class="view-more-normal"
                   v-infinite-scroll="loadMore"
                   infinite-scroll-disabled="busy"
                   infinite-scroll-distance="20">
                 <img src="./../assets/loading-spinning-bubbles.svg" v-show="loading"> 
               </div>
      </div>
    </div>
  </div>
</div>
<div class="md-overlay" v-show="overLayFlag" @click="closePop"></div>
<!-- 插入全局模态框 -->

<modal v-bind:mdShow="mdShowCart" v-on:close="closeModal">
  <p slot="message">
    <span>加入购物车成功</span>

    <svg class="icon-status-ok">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-status-ok"></use>
            </svg>
  </p>
  <div slot="btnGroup">
  <a class="btn btn--m" href="javascriptt:;" @click="mdShowCart=false">
     继续购物
  </a>
  <router-link class="btn btn--m" href="javascriptt:;" to="/cart" >查看购物车</router-link>

  </div> 

</modal>
<modal v-bind:mdShow="mdShow" v-on:close="closeModal">
  <p slot="message">
  请先登陆
  </p>
  <div slot="btnGroup">
  <a class="btn btn--m" href="javascriptt:;" @click="mdShow=false">
     关闭
  </a>
  </div>

</modal>


<nav-footer></nav-footer>
</div>
</template>

<script>
import "@/assets/css/login.css"
import "@/assets/css/base.css"
import "@/assets/css/product.css"
import NavHeader from '@/components/NavHeader'
import NavFooter from '@/components/NavFooter'
import NavBread from '@/components/NavBread'
import Modal from '@/components/Modal'
import axios from 'axios'

export default{
//初始化数据
data(){
    return{
      priceChecked:"all",
      filterBy:false,
      overLayFlag:false,
      sortFlag:true,
      page:1,
      pageSize:8,
      busy:true,
      loading:false,
      mdShow:false,
      mdShowCart:false,

      //这里是分割线
      goodsList:[],
      priceFilter: [
        {
          startPrice: "0.00",
          endPrice: "100.00"
        },
        {
          startPrice: "100.00",
          endPrice: "500.00"
        },
        {
          startPrice: "500.00",
          endPrice: "1000.00"
        },
        {
          startPrice: "1000.00",
          endPrice: "1500.00"
        }
      ]
    }
},

components:{
    NavHeader,
    NavFooter,
    NavBread,
    Modal
  },

mounted()
  {
  this.getGoodsList();
  },

methods:{
  getGoodsList(flag){
    var param={
      page:this.page,
      pageSize:this.pageSize,
      sort:this.sortFlag?1:-1,
      priceLevel:this.priceChecked
    };
    //调用 axios
    this.loading=true;
    axios.get("/goods/list",{
      params:param
    }).then((response) =>{
    let res=response.data;
    this.loading=false;
    if(res.status=="0")
    {if (flag) {
       this.goodsList=this.goodsList.concat(res.result.list);
       if (res.result==0) {
         this.busy=true
       }else{
         this.busy=false;
       }
    }else{
       this.goodsList=res.result.list;
       this.busy=false;
    }
      }
    else{this.goodsList=[];}
    })
  },

  //排序
  sortGoods(){
  this.sortFlag=!this.sortFlag;
  this.page = 1;
  this.getGoodsList();
  },

 //增加购物车
 addCart(productId){
                axios.post("/goods/addCart",{
                  productId:productId
                }).then((res)=>{
                    var res = res.data;
                    if(res.status==0){
                        this.mdShowCart = true;
                        this.$store.commit("updateCartCount",1);
                    }else{
                        this.mdShow = true;
                    }
                });
            },

  //这里是视图操作方法 我是分割线
  //视图滚动
 loadMore() {
      this.busy = true;
      setTimeout(() => {
        this.page++;
        this.getGoodsList(true);
      }, 500);
    },
  //控制价格选项表
  showFilterPop(){
    this.filterBy=true ;
    this.overLayFlag=true;
    },
  //关闭罩栅
  closePop(){
    this.overLayFlag=false;
    this.filterBy=false;
  },
  //点击价目表显示
  setPriceFilter(index){
    this.priceChecked=index;
    this.overLayFlag=false;
    this.filterBy=false;
    this.page=1;
    this.getGoodsList();
  },
  //控制全局模态框
  closeModal(){
    this.mdShow=false;
  }

}

}

</script>